#CSS Box Model

In terms of space, an HTML element is made up of four parts: content, padding, border, and margin, as illustrated below:

Margin

Border

Padding

Content

In CSS, you can use the margin, padding, and border properties to set margin, padding, and border respectively.

Example:

<div style="background-color:green; overflow:hidden;">
    <div style="margin: 30px; padding: 30px; border: 3px solid red; background-color:#212121; color:cyan;">
        margin: 30px; <br/>
        padding: 30px; <br/>
        border: 3px solid red; <br/>
    </div>
</div>

Box Model

#box-sizing

By default, when setting width and height, you're setting the content box size. The box-sizing property can change this behavior.

content-box: the size applies only to the content box (default behavior)
border-box: the size includes padding and border

Example:

<div style="width:200px; padding:10px; border:2px solid red; background-color:#212121; color:cyan;">
    width:200px; <br/>
    padding:10px; <br/>
</div>
<br/>
<div style="box-sizing:border-box; width:200px;padding:10px; border:2px solid red; background-color:#212121; color:cyan;">
    box-sizing:border-box; 
    width:200px; <br/>
    padding:10px; <br/>
</div>

Content Box vs Border Box